<template>
    <div class="header-container">
        <div class="img">
            <img src="../assets/head.png" alt="">
        </div>
        <div class="humbger">
            <i class="el-icon-s-fold"></i>
        </div>
        <div class="user">
            <div class="avatar"></div>
            <div class="drop">
            <el-dropdown>
                <span class="el-dropdown-link">
                    孔高俊<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人信息</el-dropdown-item>
                    <el-dropdown-item>退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'HeaderView',
  props: {},
  components: {},
  data () {
    return {}
  },
  computed: {},
  watch: {},
  methods: {},
  /**
  */
  created () {
  },
  /**
  * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
  */
  mounted () {
  }
}
</script>

<style scoped lang="scss">
    .header-container{
        display: flex;
        position:relative;
        height: 65px;
        background-color: #F2F2F2;
        .humbger{
            font-size: 30px;
            margin:15px 80px;
        }
        .user{
            display: flex;
            position: absolute;
            right: 20px;
            margin-top: 20px;
            .avatar{
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background-color: #ACACAC;
                margin-top: -10px;
            }
            .drop{
                padding-left: 20px;
            }
          }
        }
</style>
